<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大屏轮播效果</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>

  <div class="container">
    <!-- 
    ? data-color="background: radial-gradient(#999, #293242);"
    通过 data-color 设置各个dom自己的颜色，由js获取到再取css中设置
    -->
    <div class="item pre" data-color="radial-gradient(#999, #6f4e4f)">
      <div class="front-face">
        <img src="./img/ace.png" alt="">
      </div>
      <div class="back-face">
        <span>Web Design</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti
          vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
      </div>
    </div>

    <div class="item middle" data-color="radial-gradient(#999, #293242)">
      <div class="front-face">
        <img src="./img/Mira.png" alt="">
      </div>
      <div class="back-face">
        <span>Web Design</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti
          vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
      </div>
    </div>

    <div class="item next" data-color="radial-gradient(#999, #c1c3c4)">
      <div class="front-face">
        <img src="./img/亚娜.png" alt="">
      </div>
      <div class="back-face">
        <span>Web Design</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti
          vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
      </div>
    </div>

    <div class="item overHide" data-color="radial-gradient(#999, #232013)">
      <div class="front-face">
        <img src="./img/小飞侠.png" alt="">
      </div>
      <div class="back-face">
        <span>Web Design</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem in deleniti
          vitae beatae veritatis aliquid porro perspiciatis dolores impedit ad.</p>
      </div>
    </div>

  </div>


</body>
<script>
  // 获取所有item元素
  let items = document.querySelectorAll('.item')
//在全局定义timer定时器变量，否则若定时器在函数中声明，则在函数外部无法清除定时器
let timer
//页面第一次进入，触发自动轮播
playAuto(items )

//==============================循环播放=======================
function playAuto(items ){
//间隔5s触发一次click事件,向下循环播放
let number=0
timer=setInterval(() => {
number++
//当循环到达末尾，则返回items[0]开头
if(number>items.length-1){ number = 0}
        items[number].click()
  }, 2000)

}
//给每个items元素都添加鼠标的移入移出事件
items.forEach((item)=>{
item.onmouseenter = function(){
               clearInterval(timer)
            }

item.onmouseleave = function(){
                playAuto(items)
            }

})
//==============================循环播放=======================

  // 遍历绑定事件
  for (let i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function () {
      // 要让点击的元素滚动到中间，所以：
      // 点击元素，触发函数--》移除当前点击元素身上所有【左、中、右】样式效果
      // 因为不知道点击的是哪一个，所以移除所有三种位置样式
      this.classList.remove('pre', 'middle', 'next')

      // 然后给被点击的元素添加上middle中间元素的样式
      this.classList.add('middle')




      



      // ============================多图片切换========================================
      /**
       * !适应超过3张图片的模式---》多图轮播
       * 通过获取到当前dom元素的 前一个的数组下标preIndex  后一个的数组下标nextIndex  还有自身下标i  组成数组arr
      */
      let arr = []
      let preIndex = i - 1 >= 0 ? i - 1 : items.length - 1
      let nextIndex = (i + 1 <= items.length - 1) ? i + 1 : 0

      arr.push(i, preIndex, nextIndex)
      // 先给所有dom元素添加样式overHide（隐藏所有元素）
      for (let i = 0; i < items.length; i++) {
        items[i].classList.add('overHide')
      }
      // 单独给当前要显示的3张图，移除隐藏样式，显示它们
      arr.forEach(function (item) {
        items[item].classList.remove('overHide')
      })
      let pre = items[preIndex]
      pre.classList.remove('pre', 'middle', 'next')
      pre.classList.add('pre')
      let next = items[nextIndex]
      next.classList.remove('pre', 'middle', 'next')
      next.classList.add('next')
      // ============================多图片切换========================================

      // ============================背景色切换========================================
      /**
      *!根据点击的不同dom，设置不同的背景颜色
      dataset方法可以设置、获取dom元素的data-*格式的自定义数据
      dataset.color===》就是dom中有 data-color 这个自定义的数据
      *?渐变色不支持过渡效果
      */
      document.body.style.background = this.dataset.color;
      // ============================背景色切换========================================




      /***
       *! 对左侧上一个元素进行点击效果的处理
       *? previousElementSibling这个API是用来获取当前元素的前一个元素的
       *! 对于右侧下一个元素也是一样的处理
       *? nextElementSibling这个API是用来获取当前元素的下一个元素的
       *获取到当前点击元素的上一个元素
       *如果当前元素的没有上一个dom元素，这个API就会返回fasle  
       *通过 ?? 表示根据当前值为true，则使用问号前的，为false则使用问号后面的
       *items[items.length - 1]---》当前item元素的最后一个
       *!但是这两个API在edge游览器里，会因为被添加了多余的div，导致失败
      */
      // let pre = this.previousElementSibling || items[items.length - 1]
      // let next = this.nextElementSibling || items[0]

    })


  }


</script>

</html>